import React, { memo } from "react";
import sty from "./sty.module.css";
import { getSizeImage, getCount } from "../../../../api/utils";
import { useHistory } from "react-router";
import cs from "classnames";
const RecommendList = (props) => {
  const { list } = props;
  const history = useHistory();
  const goDetail = (id) => {
    history.push(`/album/${id}`);
  };
  return (
    <div className={sty.root}>
      <h3 className={sty.title}>推荐歌单</h3>
      <ul className={cs("flex4", sty.list)}>
        {list.map((v, i) => {
          return (
            <li className={sty.item} key={v.id} onClick={() => goDetail(v.id)}>
              <img src={getSizeImage(v.picUrl)} alt="music" />
              <div className={sty.playCount}>
                <span className={sty.count}>{getCount(v.playCount)}</span>
              </div>
              <div className={cs(sty.desc, "txt2")}>{v.name}</div>
            </li>
          );
        })}
      </ul>
    </div>
  );
};
export default memo(RecommendList);
